<template>
  <div class="container">
    <div class="box box-ver w-p100 h-p100">
      <div class="search box box-ac">
        <div class="icon icon-search"></div>
        <input placeholder="搜索" v-model="searchWord" class="box-f1" type="text">
      </div>
      <div class="tab box">
        <div @click="changeTab(0)" :class="{act: actTabIndex === 0}" class="tab-item box box-f1 box-fh box-ac box-jc">国内</div>
        <div @click="changeTab(1)" :class="{act: actTabIndex === 1}" class="tab-item box box-f1 box-fh box-ac box-jc">国际</div>
      </div>
      <div class="fixed-bar">
        <div @click.stop @touchstart="scroll(index)" @touchmove="scroll(index)" v-for="(item, index) in searchList" :key="index" class="text">
          {{index}}
        </div>
      </div>
      <div ref="scroll" class="box box-ver box-f1 of-y-s">
        <div v-if="actTabIndex === 0" class="hot-content">
          <div class="tag">热门城市</div>
          <div class="list">
            <div @click="checkItem(item)" v-for="(item, index) in hotList" :value="item" :key="index" class="hot-item">{{item.cityname}}</div>
          </div>
        </div>
        <div v-for="(item, index) in searchList" :value="item" :key="index" class="list-content">
          <div :id="index" class="tag">
            {{index}}
          </div>
          <div class="list list1">
            <div v-for="(item1, index1) in item" :value="item1" :key="index1" @click="checkItem(item1)"  class="item box box-ver">
              <div class="box box-ac">
                <div class="name">{{item1.cityname}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getPyData, getTop } from '@/assets/js/common'
import { getCitys } from '@/assets/js/api'
export default {
  name: 'k2PersonSelect',
  data () {
    return {
      hotList: [
        { cityname: '北京' },
        { cityname: '上海' },
        { cityname: '广州' },
        { cityname: '深圳' },
        { cityname: '武汉' },
        { cityname: '杭州' },
        { cityname: '南京' },
        { cityname: '郑州' },
        { cityname: '重庆' },
        { cityname: '济南' },
        { cityname: '沈阳' },
        { cityname: '大连' },
        { cityname: '吉林' },
        { cityname: '辽宁' },
        { cityname: '太原' }
      ],
      gnList: [],
      gjList: [],
      dataList: [],
      searchList: [],
      searchWord: '',
      actTabIndex: 0,
      timer: null
    }
  },
  computed: mapState(['userNum', 'bizAccountBill']),
  mounted () {
    this.getCitys()
  },
  watch: {
    searchWord () {
      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.$store.commit('isLoading', true)
      this.timer = setTimeout(() => {
        this.$store.commit('isLoading', false)
        this.search()
      }, 666)
    }
  },
  methods: {
    checkItem (item) {
      console.log(item)
      let city = item.cityname
      let { index, type } = this.$route.query
      this.bizAccountBill.entrys[index][type] = city
      this.$store.commit('bizAccountBill', {
        entrys: this.bizAccountBill.entrys
      })
      this.$router.go(-1)
      // item = Object.assign({}, item, this.$route.query)
      // this.$emit('selectPersonCb', item)
      // this.$router.go(-1)
    },
    scroll (index) {
      let $target = document.getElementById(index)
      let $scroll = this.$refs.scroll
      let top = getTop($target, $scroll)
      $scroll.scrollTop = top
    },
    search () {
      let searchWord = this.searchWord
      let list = []
      this.dataList.forEach(item => {
        if ((item.cityname && item.cityname.indexOf(searchWord) > -1) || (item.pinyin && item.pinyin.indexOf(searchWord) > -1)) {
          list.push(item)
        }
      })
      this.searchList = getPyData(list, 'cityname')
      this.$refs.scroll.scrollTop = 0
    },
    changeTab (index) {
      this.actTabIndex = index
      if (index === 0) {
        this.dataList = this.gnList
      } else {
        this.dataList = this.gjList
      }
      this.searchWord = ''
      this.search()
    },
    getCitys () {
      let getCitys = sessionStorage.getItem('getCitys')
      if (getCitys) {
        this.allData = JSON.parse(getCitys)
        this.initCityData()
        return
      }
      getCitys(list => {
        this.allData = list
        sessionStorage.setItem('getCitys', JSON.stringify(this.allData))
        this.initCityData()
      })
    },
    initCityData () {
      let gnList = []
      let gjList = []
      this.allData.forEach(item => {
        if (item.inchina === 'T') {
          gnList.push(item)
        } else {
          gjList.push(item)
        }
      })
      this.gnList = gnList
      this.gjList = gjList
      this.dataList = gnList
      this.searchList = getPyData(gnList, 'cityname')
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/search';
.container{
  background-color:#FFF;
  color:#666;
}
.list-content{
  background-color:$bgColor;
}
.item{
  font-size:.26rem;
}
.search{
  background-color:$bgColor;
  input{
    background-color:$bgColor;
  }
}
.tab{
  background-color:#FFF;
  .tab-item{
    height:.8rem;
    &.act{
      color: $themeColor;
      border-bottom:.03rem solid $themeColor;
    }
  }
}
.hot-content{
  background-color: $bgColor;
  .tag{
    font-size:.28rem;
    color:#888;
    padding:.15rem .4rem;
  }
  .list{
    background-color: $bgColor;
    width:100%;
  }
  .hot-item{
    display:inline-block;
    border-radius:.1rem;
    line-height: .54rem;
    text-align: center;
    width:27%;
    margin:.1rem 1%;
    height:.54rem;
    border:.03rem solid $themeColor;
    color:$themeColor;
    &:nth-of-type(3n+1) {
      margin-left:.4rem;
    }
  }
}
.fixed-bar{
  width:.5rem;
  position: absolute;
  z-index:8;
  top:55%;
  right:0;
  color:#999;
  // background-color:rgba(0,0,0,.5);
  transform: translateY(-50%);
  .text{
    width:.5rem;
    text-align: center;
  }
}
</style>
